import React from 'react'
// ===================================================================== Temp
import SearchForm from '#cpt/temp/SearchForm'
import Table from '#cpt/temp/Table'
import TableControls from '#cpt/temp/TableControls'
import Delete from '#cpt/temp/Delete'
import Controls from '#cpt/temp/Controls'
import AddEditModal from '#cpt/temp/AddEditModal'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const Page 				= $Lazy.load(()=>import('#tp/page/page-container'))
const Title				= $Lazy.load(()=>import('#tp/title/title-small'))
const TableComponent	= $Lazy.state(()=>import('./cpt/table-component'))
// ===================================================================== private component
const TypeData = [{name:'默认', value:'0'}]
const RelationData = [{name:'同时满足', value:'1'},{name:'满足一条', value:'2'},{name:'满足多条', value:'3'},{name:'都不满足', value:'4'}]
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		selectedKeys:[],
		// 搜索表单列表
		forms : [
			{ label: '编号',		name: 'absurd_number' },
			{ label: '名称',		name: 'absurd_name' },
			{ label: '类型',		name: 'absurd_type', 		type:'select', data:TypeData },
			{ label: '关系',		name: 'absurd_relation', 	type:'select', data:RelationData },
			{ label: '状态',		name: 'enabled', 			type:'select', data:[{name:'启用', value:'1'},{name:'禁用', value:'0'}] },
		],
		// 提交表单列表
		formData : [
			{ label: '编号',		name: 'absurd_number', 		half:true, required:true },
			{ label: '名称',		name: 'absurd_name', 		half:true, required:true },
			{ label: '类型',		name: 'absurd_type', 		half:true, required:true, type:'select', data:TypeData },
			{ label: '关系',		name: 'absurd_relation', 	half:true, required:true, type:'select', data:RelationData },
			{ label: '状态',		name: 'enabled', 			half:true, type:'select', data:[{name:'启用', value:'1'},{name:'禁用', value:'0'}] },
			{ label: '备注',		name: 'scene_remark', 		full:true, type:'textarea' }
		],
	}
	
	model = {}
	
	componentDidMount(){
		
		this.fetch()
	}

	// paging
	fetch = () => $fn.fetch.call(this,'lis-absurd-data/index')
	
	// 表单
	cols = [
		{ title: '编号',			dataIndex: 'absurd_number',		width:100 },
		{ title: '名称',			dataIndex: 'absurd_name',		width:100 },
		{ title: '类型',			dataIndex: 'absurd_type',		width:100, render:text=>$fn.getState(TypeData,text) },
		{ title: '关系',			dataIndex: 'absurd_relation',	width:100, render:text=>$fn.getState(RelationData,text) },
		{ title: '状态',			dataIndex: 'enabled',			...$fn.table.status, render: text => text === '1' ? '启用' : '未启用' },
		{ title: '备注',			dataIndex: 'absurd_remark',		width:150 },
		TableControls.controls.call(this),
	]
	
	// 表格操作按钮
	table_controls = (text,{ uuid }) => {
		return [
			// 编辑
			TableControls.edit.call(this, 'lis-absurd-data/info', { uuid } ,{
				select: this.getModalSelect
			})
		]
	}
	// 操作按钮
	controls = () => {
		return [
			Controls.add.call(this),			// 添加
			this.onDel(),						// 删除
		]
	}
	// 删除
	onDel = uuid => Delete.call(this, 'lis-absurd-data/del', { uuid, isKeys: !uuid })
	render(){
		return (
			<>
				<Page title='批量终止报告单' nobc >
					{/* 搜索 */}
					{ SearchForm.call(this) }
					<div className='fx ex mt5'>
						{/* 表格 */}
						<div className='fv ex mr5'>
							<Title title='项目列表' controls={this.controls()} />
							{ Table.call(this, { type:1,onRow:({ uuid }) => this.tableRef.fetch({absurd_id: uuid}), wrapClassName:' ' }) }
						</div>
						<TableComponent onRef={ ref => this.tableRef = ref }/>
					</div>
				</Page>
				{/* 添加、编辑 */}
				{ AddEditModal.call(this,{ title:'项目列表', labelWidth:'s4', api: 'lis-absurd-data/add', editApi:'lis-absurd-data/edit'  }) }
			</>
		)
	}
}

export default Index